<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>test</title>    
</head>
<body>
	<input type="text" id="name" />

	<script id="test" src="jquery.js"></script>
	<script type="text/javascript">
		(function($) {
			var createTip = function(ele, content, style){
				var nextSpan = ele.next();
				var span = nextSpan.attr("class") == "tip" ? nextSpan : $("<span>").addClass("tip");
				style["color"] = style["color"] || "red";
				style["display"] = "inline";
				for(var value in style){
					span.css(value, style[value]);
				}
				span.text(content);
				ele.after(span);
			};

			var formate = {
				email: /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/
			};

			$.fn.inputCheck = function(o) {
					var isSize = o["min"] || o["max"];

					o["required"] && o["showRequired"] && createTip(this, "*", o["fontStyle"]);
					o["defalut"] && this.val(o["defalut"]).css("color", "#ccc");

					this.on("click", function(){
						var element = $(this);
						element.val() == o["defalut"] && element.val("").css("color", "#000");
					});

					this.on("blur", function(){
						var element = $(this),
							valueEmpty = element.value == "";
						o["required"] && valueEmpty && createTip(element, "未填写", o["fontStyle"]);//为空时的验证

						if (valueEmpty) {
							element.val(o["defalut"]).css("color", "#ccc");
						} else {
							if (isSize) {
								var size = element.val().length;
								var min = o["min"] && o["min"] > size && "至少" + o["min"] + "位"; 
								var max = o["max"] && o["max"] < size && "至多" + o["max"] + "位";
								min && createTip(element, min, o["fontStyle"]);
								max && createTip(element, max, o["fontStyle"]);
							}
							var type = formate[o["type"]];
							( (type && !type.test(element.val()) ) 
							  || ( !type 
							  		&& $.type(o["type"]) == "regexp"
							  		&& !o["type"].test(element.val())
							  	 )
							) && createTip(element, "格式错误", o["fontStyle"]);
						}
					});

					this.on("keydown", function(){
						$(this).next().hide();
					})
					return this;
				}
			})(jQuery);


		var fontstyle = {
			color: "pink",
			fontSize: "12px",
			fontFamily: "微软雅黑",
			paddingLeft: "4px"
		};

		$("#name").inputCheck({
			showRequired: true,  //是否在必填项上标记
			fontStyle :	fontstyle, //文字显示的样式
			required: true, //必填提示
			min: 8, //最短长度
			max: 15, //最长长度
			type: "email", //验证格式
			defalut: "点击消失" //默认value
		});
	</script>
</body>  
</html>  